<script setup>
import * as echarts from 'echarts';
import {Histogram, Money, Star} from "@element-plus/icons-vue";
import {onMounted} from "vue";
import {ref} from 'vue'

onMounted(() => {

})
import {useTransition} from '@vueuse/core'
import {getOrdersSumService, userAdminInfoGetService} from "@/api/user";


const data=ref({
    totalGoods:0,//总成交笔数
    totalOrders:0,//总成交笔数
    totalUsers:0,//总人数
    totalPurchaser:0,//总采购商
    totalSupplier:0,//总供应商
})
//获取信息
const managerInfoGet=async () => {
    const result = await userAdminInfoGetService()
    console.log(result.data)
    data.value.totalUsers = result.data.totalUsers
    data.value.totalOrders = result.data.totalOrders
    data.value.totalGoods = result.data.totalGoods
    data.value.totalPurchaser = result.data.totalPurchaser
    data.value.totalSupplier = result.data.totalSupplier
    // 调用函数渲染折线图
    renderLineChart_users(data.value);
}
//饼图表渲染
const renderLineChart_users = (data) => {
    let myChart1 = echarts.init(document.getElementById("number"));
    //商品销售情况
    const ratio_data = [
        {name: '供应商', value: data.totalSupplier},
        {name: '采购商', value: data.totalPurchaser},
        {name: '管理员', value: 1}
    ];
    //配置项
    myChart1.setOption({
        title: [
            {
                left: 'center',
                text: '系统使用人数占比图'
            }
        ],
        legend: {
            orient: 'vertical',
            left: 'left',
            padding: 10
        },
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: ratio_data,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    });
}
//获取账单信息
const getOrdersSum = async () => {
    const result=await getOrdersSumService()
    // 获取最近7天的成交订单笔数
    const endDate = new Date(); // 当前日期
    const startDate = new Date(endDate); // 开始日期为当前日期
    startDate.setDate(startDate.getDate() - 6); // 7天前的日期
    // 过滤出近7天的支出信息
    const recentPay = result.data.filter(bill => new Date(bill.otime) >= startDate);

    // 调用函数渲染折线图
    renderLineChart_orders(recentPay);

}
//折线图表渲染
const renderLineChart_orders = (recentData) => {
    const currentDate = new Date();
    // 构建当前日期开始的最近7天日期数组
    const recentXAxisData = [];
    for (let i = 6; i >= 0; i--) {
        const date = new Date(currentDate);
        date.setDate(date.getDate() - i);
        const formattedDate = date.toISOString().slice(0, 10); // 格式化为 YYYY-MM-DD
        recentXAxisData.push(formattedDate);
    }

// 构建当前日期开始的最近7天成交笔数，如果某天没有订单交易，则交易数为0
    const recentSeriesData = recentXAxisData.map(date => {
        // 找到所有日期匹配的账单数组
        const matchingBills = recentData.filter(bill => bill.otime.slice(0, 10) === date);
        // 如果有匹配的账单
        if (matchingBills.length > 0) {
            return matchingBills.reduce((acc, curr) => acc + 1, 0);
        } else {
            return 0; // 没有匹配的账单，收入金额为0
        }
    });

    // 使用 ECharts 初始化折线图实例
    const myChart1 = echarts.init(document.getElementById('orders'));
    myChart1.setOption({
        title: [
            {
                left: 'center',
                text: '近7天成交笔数趋势图'
            }
        ],
        xAxis: {
            type: 'category',
            data: recentXAxisData,
            axisLabel: {
                formatter: function (value) {
                    // 只返回月份和天数
                    return value.slice(5);
                }
            }
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: recentSeriesData,
            type: 'line',
            symbol: 'none'
        }],
        lineStyle: {
            width: 3,  // 设置线宽
            color: {
                type: 'linear',  // 渐变类型为线性渐变
                x: 0,  // 渐变起始位置 x 坐标
                y: 0,  // 渐变起始位置 y 坐标
                x2: 0,  // 渐变结束位置 x 坐标
                y2: 1,  // 渐变起始位置 x 坐标
                colorStops: [{
                    offset: 0,  // 渐变起始位置，从 0 开始
                    color: 'red'  // 渐变起始颜色
                }, {
                    offset: 1,  // 渐变结束位置，到 1 结束
                    color: 'yellow'  // 渐变结束颜色
                }]
            }},
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: 'pink'
                }
            }
        }
    });
}
getOrdersSum()//渲染图表
managerInfoGet().then(() => {//等异步信息调用完再赋值
    people_num.value = data.value.totalUsers;
    goods_num.value = data.value.totalGoods;
    orders_num.value = data.value.totalOrders;
});

//系统总人数
const people_num = ref(0)
const outputValue1 = useTransition(people_num, {
    duration: 500,
})
//商品总数
    const goods_num = ref(0)
const outputValue2 = useTransition(goods_num, {
    duration: 1000,
})

//成交总数
const orders_num = ref(0)
const outputValue3 = useTransition(orders_num, {
    duration: 500,
})
</script>
<template>
    <div class="data-body">
        <div class="data-cards">
            <el-card class="same-card">
                <div class="topIcon">
                    <el-icon>
                        <Histogram/>
                    </el-icon>
                </div>
                <div class="statistic-container">
                    <el-statistic title="商品总数" :value="outputValue2" style="line-height: 50px;" />
                </div>
            </el-card>
            <el-card class="same-card">
                <div class="topIcon">
                    <el-icon>
                        <Star/>
                    </el-icon>
                </div>
                <div class="statistic-container">
                    <el-statistic title="系统使用人数" :value="outputValue1" style="line-height: 50px;" />
                </div>
            </el-card>
            <el-card class="same-card">
                <div class="topIcon">
                    <el-icon>
                        <Money/>
                    </el-icon>
                </div>
                <div class="statistic-container">
                    <el-statistic title="成交笔数" :value="outputValue3" style="line-height: 50px;" />
                </div>
            </el-card>
        </div>
        <div class="data-graphs">
            <!--    饼状图-->
            <div id="number" style="margin-top:120px;margin-left:40px;display:inline-block;width: 46%;height: 300px;">
                饼状图
            </div>
            <!--    柱状图-->
            <div id="orders" style="margin-top:120px;margin-left:10px;display:inline-block;width: 46%;height: 300px;">
                柱状图
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "ManagerHome"
}
</script>


<style scoped>
.data-body {
    height: 90vh;
    overflow-y: scroll;
}
/*统计系统使用人数*/
.statistic-container {
    height: 50px; /* 设置容器的高度 */
    display: flex;
    justify-content: center; /* 在主轴上居中 */
    align-items: center; /* 在交叉轴上居中 */
}
/*包着几张卡片的大卡片样式*/
.data-cards {
    display: flex;
    height: 25%;
    justify-content: center;
}

/*卡片样式*/
.same-card {
    text-align: center;
    margin: 10px 10px 0 10px;
    flex: 3;
}

/*卡片中图标样式*/
.same-card .topIcon {
    display: flex;
    float: left;
    font-size: 30px;
}

/*图表样式*/
.data-graphs {
    margin-top: 0;
}
</style>
